<template>
  <view v-if="details.id" class="registration-detail-page">
    <!-- 0-未支付， 1-待开赛 , 2-已完成, 3-已取消, 4- 已失效 -->
    
    <view v-if="details.status === 0" class="top-status-paying">
      <!-- 倒计时 -->
      <countdown :minutes="details.validity_desc.minutes" :seconds="details.validity_desc.seconds" @countdown-end="onCountdownEnd" />
    </view>
    <view v-else-if="details.status === 1" class="top-status">
      报名成功，等待开赛
    </view>
    <!-- <view v-else class="top-status-no">
      报名已失效
    </view> -->
    <view class="card">
      <navigator :url="'/home/match/detail?id='+details.activity_id" class="goods">
        <image v-if="details.activity && details.activity.image_text" class="photo" :src="details.activity.image_text"></image>
        <view class="infos">
          <view class="title"
            >{{details.activity.title}}</view
          >
          <view class="type">{{details.activity.intro}}</view>
        </view>
      </navigator>
      <view class="user">
        <view class="left">
          <view v-for="(item, index) in user" :key="item.prop" :class="{ u1: index === 0, u2: index > 0 }">
            <text v-if="index > 0">{{item.label}}：</text>{{item.value}}
          </view>
        </view>
        <navigator v-if="details"
          :url="`registrationForm?id=${details.id}`"
          class="btn"
          >查看详情</navigator
        >
      </view>
    </view>
    <view class="card">
      <!-- <view class="money">
        <view class="bt">报名费用</view>
        <view class="cell">
          <view class="label">{{details.activity.intro}} ( x1)</view>
          <view class="value">￥ {{details.price}}</view>
        </view>
        <view class="cell">
          <view class="label">优惠</view>
          <view class="value">-￥ 0.00</view>
        </view>
        <view class="cell">
          <view class="label">小计</view>
          <view class="value">￥ {{details.price}}</view>
        </view>
      </view> -->
      <view class="total">
        <view class="bt">报名费用</view>
        <view class="val">￥ {{details.price}}</view>
      </view>
    </view>
    <!-- 0-未支付， 1-待开赛 , 2-已完成, 3-已取消, 4- 已失效 -->
    <view v-if="details.status == 1 || details.status == 0" class="card">
      <view class="cancel-btn" @click="handleCancel(null)">取消报名</view>
    </view>
    
    <view v-if="details.orders && details.orders.sn" class="card">
      <view class="time">
        <view class="label">订单编号：{{details.orders.sn}}</view>
        <view class="copy" @click="handleCopy">复制</view>
      </view>
      <view class="time">
        <view class="label">报名时间：{{details.orders.createtime}}</view>
      </view>
    </view>

    <view class="bottom-btn-fixed">
      <view class="block"></view>
      <view class="bottom-btn-fixed--wrapper">
        <view v-if="details.status === 0" class="left">合计：<text class="price">￥{{details.price}}</text></view>
        <view class="btn-box">
          <view v-if="details.status === 0" class="btn pay-btn" @click="handlePayment">立即支付</view>
          <view v-else-if="details.status === 1" class="btn" @click="handleCancel(null)">取消报名</view>
          <template v-else>
            <view class="btn" @click="handleDelete">删除报名</view>
            <view class="btn" @click="handleReload">重新报名</view>
          </template>
        </view>
      </view>
    </view>

    <cancel-reason v-model="reasonShow" @confirm="handleCancel" ref="cancelReasonRef" />
  </view>
</template>

<script>
import orderUtils from '@/utils/index.js';
  
export default {
  data() {
    return {
      details: { 
        id: null, 
        activity: {}, 
        orders: null, 
        validity_desc: {
          minutes: 0, 
          seconds: 0,
        },
      },
      reasonShow: false,
      user: [],
    };
  },
  methods: {
    // 倒计时结束时的回调
    onCountdownEnd() {
      uni.showToast({
        title: '倒计时结束！',
        icon: 'none',
        duration: 2000
      });
      this.loadRes();
      console.log('倒计时已结束');
    },
    
    // 取消报名
    handleCancel(e = null) {
      if (e === null) {
        this.reasonShow = true;
      } else {
        orderUtils.cancel(
          this, {
            register_id: this.details?.id,
            reason_id: e
          },
          this.loadRes
        );
      }
    },
    // 删除报名
    handleDelete() {
      orderUtils.delete(this, this.details.id, this.loadRes);
    },
    // 重新报名
    handleReload() {
      uni.showModal({
        content: "确定要重新报名？",
        confirmColor: '#05B196',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: `/home/match/detail?id=${this.details.activity_id}&register_id=${this.details.id}`,
            });
          }
        },
      });
    },
    // 支付
    handlePayment() {
      orderUtils.payment(this, this.details.id, this.loadRes);
    },
    loadRes() {
      this.$api.activityRegisterInfoApi({ register_id: this.details.id }).then(res => {
        this.details = res.data;
        this.user = [];
        res.data.activity_field.forEach(v => {
          const obj = { label: v.field_label, prop: v.field_name, value: '' };
          const target = res.data.fields.find(s => s.field_id === obj.prop);
          obj.value = target?.field_value || '';
          this.user.push(obj);
        })
      });
    },
    // 复制订单编号
    handleCopy() {
      uni.setClipboardData({
        data: this.details?.orders?.sn,
        success() {
          uni.showToast({
            icon: "success",
            title: "已复制",
          });
        },
      });
    },
  },
  onLoad(opts) {
    this.details.id = opts.id;
    this.loadRes();
  }
};
</script>

<style lang="scss">
.registration-detail-page {
  min-height: 100vh;
  background-color: #f7f7f7;
  .top-status {
    line-height: 85rpx;
    text-align: center;
    font-size: 28rpx;
    color: #05b196;
  }
  .top-status-paying {
    line-height: 85rpx;
    text-align: center;
    font-size: 28rpx;
    color: #EA1D1B;
  }
  .top-status-no {
    line-height: 85rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
  }
  .card {
    background-color: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    overflow: hidden;
    .goods {
      padding: 30rpx 0;
      @include flex(row, flex-start, center);
      box-shadow: 0 1px 0 #eee;
      .photo {
        width: 118rpx;
        height: 118rpx;
        border-radius: 8rpx;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .infos {
        flex: 1;
        overflow: hidden;
        .title {
          font-size: 28rpx;
          line-height: 36rpx;
          color: #333;
          margin-bottom: 20rpx;
        }
        .type {
          font-size: 24rpx;
          line-height: 30rpx;
          color: #666;
        }
      }
    }
    .user {
      @include flex(row, flex-start);
      padding: 28rpx 0;
      .left {
        flex: 1;
        .u1 {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        .u2 {
          font-size: 24rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
      .btn {
        font-size: 26rpx;
        color: #05b196;
        text-decoration: underline;
      }
    }
    .money {
      padding: 30rpx 0;
      box-shadow: 0 1px 0 #eee;
      .bt {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      .cell {
        @include flex;
        font-size: 24rpx;
        color: #666;
        line-height: 30rpx;
        margin-top: 26rpx;
        .label {
          flex: 1;
          overflow: hidden;
        }
      }
    }
    .total {
      @include flex;
      height: 82rpx;
      font-size: 24rpx;
      .bt {
        flex: 1;
        overflow: hidden;
        color: #333333;
      }
      .val {
        color: #ea1d1b;
      }
    }
    .time {
      @include flex(row,center,flex-start);
      height: 30;
      font-size: 26rpx;
      margin: 24rpx 0;
      .label {
        color: #333;
      }
      .copy {
        color: #05B196;
        text-decoration: underline;
        margin-left: 30rpx;
      }
    }
    .cancel-btn {
      width: 100%;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333333;
      background: #ffffff;
    }
  }
  .bottom-btn-fixed {
    .block {
      height: calc(140rpx + env(safe-area-inset-bottom));
      width: 100%;
    }
    &--wrapper {
      height: calc(140rpx + env(safe-area-inset-bottom));
      background-color: #fff;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      box-sizing: border-box;
      padding: 0 30rpx;
      @include flex(row,center,flex-end);
      .left {
        flex: 1;
        font-size: 26rpx;
        color: #666666;
        .price {
          font-size: 32rpx;
          color: #EA1D1B;
          font-weight: bold;
        }
      }
      .btn-box {
        @include flex(row,center,flex-end);
        .btn {
          width: 176rpx;
          height: 60rpx;
          border: 1px solid #aaaaaa;
          border-radius: 8rpx;
          font-size: 26rpx;
          color: #666666;
          @include flex;
          margin-left: 14rpx;
          &.pay-btn {
            background-color: #05B196;
            border-color: #05B196;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
